<template>
  <div class="update-photo">
<!--     <h1>上传头像</h1>-->
      <div class="img_wrap">
          <img :src="photo" alt="" class="photo" ref="img">
      </div>
      <div class="toolbar">
          <div @click="$emit('close')">取消</div>
          <div @click="onSave">确定</div>
      </div>
  </div>
</template>

<script>
// import updateUserPhoto from '@/api/user'
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'
import { updateUserPhoto } from '../../../api/user'

export default {
  name: 'UpdatePhoto',
  components: {},
  props: {
    // 父亲传过来的值
    photo: {
      type: [String, Object],
      required: true
    }
  },
  data () {
    return {
      message: this.value,
      cropper: null
    }
  },
  computed: {},
  watch: {},
  created () {
  },
  mounted () {
    const image = this.$refs.img
    this.cropper = new Cropper(image, {
      viewMode: 1,
      dragMode: 'move',
      aspectRatio: 1,
      autoCropArea: 1,
      cropBoxMovable: false,
      cropBoxResizable: false,
      background: false,
      movable: true
    })
    // console.log(cropper)
  },
  methods: {
    // async onConfirm () {
    //   // this.$toast.loading({
    //   //   message: '保存中...',
    //   //   forbidClick: true, // 禁止背景点击
    //   //   duration: 0 // 持续展示
    //   // })
    //
    //   try {
    //     // const message = this.message
    //
    //     const res = await updateUserProfile({
    //     })
    //     console.log(res)
    //     // this.photo = data.photo
    //     // console.log(this.photo)
    //     // 更新视图
    //     // this.$emit('input', message)
    //
    //     // 关闭弹层
    //     // this.$emit('close')
    //
    //     // 提示成功
    //     // this.$toast.success('更新成功')
    //   } catch (err) {
    //     this.$toast.fail('更新失败')
    //   }
    // },
    onSave () {
      // console.log(1213)
      // console.log(this.cropper.getData())
      this.cropper.getCroppedCanvas().toBlob(async blob => {
        console.log(blob)
        // const formData = new FormData()
        // // formData.append('名字', 数据)
        // formData.append('photo', blob)
        // const { data } = await updateUserPhoto(formData)
        // console.log(data)

        const { data } = await updateUserPhoto(
          { photo: blob }
        )
        console.log(data)
        this.$toast.success('保存成功')
        this.$emit('close')
        this.$emit('update-photo', data.data.photo)
        // 这里有跨越问题。后面再来解决。。。。。。。。。。。。。。。。。。。。。。
        // 啊啊啊。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
      })
    }
  }
}
</script>

<style scoped lang="less">
.field-wrap {
  padding: 20px;
}
    .photo {
        max-width: 100%;
    }
    .update-photo {
        background-color: #222222;
        height: 100%;
        .toolbar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            color: #ffffff;
        }
    }
.img {
    display: block;
    max-width: 100% ;
}
</style>
